<script setup>
import { Refresh, DropDownList, Close } from '@icon-park/vue-next'

const emits = defineEmits(['getList'])
const route = useRoute()

const status = reactive({
    searchMore: false,//显示更多搜索
})
const data = reactive({
    type: [],//类型
    date: [route.query.dstart || '', route.query.dend || ''],//时间选择器存储
    search: {
        title: route.query.title || '',//标题
        tid: route.query.tid || '',//类别
        dstart: route.query.dstart || '',//开始时间
        dend: route.query.dend || '',//结束时间
    }
})

onMounted(() => {
    getType()
})

//获取类型
const getType = () => {
    axios.get('/auth/articleTypeList').then(response => {
        data.type = func.listToTree(response.data.list)
    })
}
//查询时需带上其他页面的参数 如:排序,清除page
const search = () => {
    emits('getList', { ...route.query, 'page': '', ...data.search })
}
//清空查询
const clearSearch = () => {
    for (const i in data.search) {//循环所有条件并重置
        data.search[i] = ''
    }
    data.date = ['', '']//重置时间
    search()
}
//更多查询提示已搜索的数量
const searchMoreCount = () => {
    let count = 0
    for (const i in data.search) {//循环所有条件并重置
        if (['title', 'dstart', 'dend'].indexOf(i) != -1) continue;
        if (data.search[i] != '') count++
    }
    //单独判断时间段
    if (data.search.dstart != '' || data.search.dend != '') count++
    return count
}
</script>

<template>
    <div>
        <div class="search-more-shadow" v-if="status.searchMore" @click="() => { status.searchMore = false }"></div>
        <el-space>
            <el-input class="search" v-model="data.search.title" placeholder="输入标题搜索" @keydown.enter="search()"
                clearable />
            <el-button-group>
                <el-popover :visible="status.searchMore" placement="bottom" :width="520">
                    <div class="flex-2 pl5 pr5">
                        <el-text>所有查询条件：</el-text>
                        <el-link :underline="false" @click="() => { status.searchMore = false }">
                            <Close />
                        </el-link>
                    </div>
                    <el-divider class="mt10 mb0" />
                    <el-form class="search-more mt15">
                        <el-form-item label="输入标题搜索">
                            <el-input v-model="data.search.title" placeholder="输入标题搜索" clearable />
                        </el-form-item>
                        <el-form-item label="选择类型">
                            <el-cascader v-model="data.search.tid" :options="data.type" filterable clearable
                                :props="{ expandTrigger: 'hover', emitPath: false, checkStrictly: true, value: 'id', label: 'name', children: 'children' }" />
                        </el-form-item>
                        <el-form-item label="选择查询时间段">
                            <el-date-picker v-model="data.date" type="daterange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                @change="(val) => { data.search.dstart = val ? val[0] : ''; data.search.dend = val ? val[1] : '' }" />
                        </el-form-item>
                    </el-form>
                    <el-form class="search-more mb10">
                        <el-form-item label="&nbsp;" class="pt20">
                            <el-button type="primary" plain @click="search()">查询</el-button>
                            <el-button type="warning" plain @click="clearSearch()">清空</el-button>
                        </el-form-item>
                    </el-form>
                    <template #reference>
                        <el-button class="search-more-icon" type="primary" plain
                            @click="() => { status.searchMore = !status.searchMore }">
                            <el-badge v-if="searchMoreCount() > 0" :value="searchMoreCount()"></el-badge>
                            <DropDownList v-else />
                        </el-button>
                    </template>
                </el-popover>
                <el-button type="primary" plain @click="search()">查询</el-button>
            </el-button-group>
            <el-button type="warning" plain @click="clearSearch()">清空</el-button>
            <el-tooltip effect="dark" content="刷新数据" placement="right">
                <el-link :underline="false" @click="emits('getList', route.query)">
                    <Refresh />
                </el-link>
            </el-tooltip>
        </el-space>
    </div>
</template>

<style scoped lang="scss"></style>
